<script setup lang="ts">
import {
  SidebarProvider,
  SidebarInset,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { Separator } from "@/components/ui/separator";
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbPage,
} from "@/components/ui/breadcrumb";
import AppSidebar from "./components/AppSidebar.vue";
import { useRoute, RouterView } from "vue-router";
import { computed } from "vue";
import { isLoggedIn } from "./utils/auth";
import { Toaster } from "@/components/ui/sonner";
import "vue-sonner/style.css"; // vue-sonner v2 requires this import

const menu = [
  { path: "/", label: "上传" },
  { path: "/material", label: "素材库" },
  { path: "/copywriting", label: "AI文案生成" },
  { path: "/expand", label: "图片扩展" },
  { path: "/export", label: "图文导出" },
  { path: "/history", label: "历史记录" },
  { path: "/favorite", label: "收藏夹" },
];
const $route = useRoute();
const currentLabel = computed(
  () => menu.find(item => item.path === $route.path)?.label || ""
);

// 检查是否在登录页面
const isLoginPage = computed(() => $route.path === "/login");
const isAuthenticated = computed(() => isLoggedIn());
</script>

<template>
  <!-- 登录页面直接显示 -->
  <RouterView v-if="isLoginPage" />

  <!-- 已登录用户显示完整布局 -->
  <SidebarProvider v-else-if="isAuthenticated">
    <AppSidebar />
    <SidebarInset>
      <header class="flex h-14 shrink-0 items-center gap-2">
        <div class="flex flex-1 items-center gap-2 px-3">
          <SidebarTrigger />
          <Separator orientation="vertical" class="mr-2 h-4" />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbPage>
                  {{ currentLabel }}
                </BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
      </header>
      <main class="flex-1">
        <router-view v-slot="{ Component }">
          <transition name="fade">
            <component :is="Component" />
          </transition>
        </router-view>
      </main>
    </SidebarInset>
  </SidebarProvider>

  <!-- 未登录用户直接显示路由内容（路由守卫会处理重定向） -->
  <RouterView v-else />
  <Toaster />
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
